import React, { useState, useImperativeHandle, forwardRef } from 'react'
import { Drawer } from 'antd'
import { CodeMirror } from '@/components'
import styles from './index.module.less'

interface ScriptPanelRef {
  initDraw: (script: string) => void
  close: () => void
}

const ScriptPanel = (props, ref: React.Ref<ScriptPanelRef>) => {
  const [visible, setVisible] = useState(false)
  const [script, setScript] = useState('')

  const handleScriptChange = (script: string) => {
    setScript(script)
  }

  const onClose = () => {
    setVisible(false)
  }
  useImperativeHandle(ref, () => ({
    initDraw: script => {
      handleScriptChange(script)
      setVisible(true)
    },
    close: onClose
  }))
  return (
    <Drawer
      className={styles['script-config-draw']}
      placement="right"
      mask={false}
      visible={visible}
      getContainer={false}
      keyboard={false}
      // closeIcon={false}
      width="100%"
      style={{
        position: 'absolute'
        // top: 40,
        // bottom: 150,
        // height: 'unset'
      }}
      onClose={onClose}
    >
      <CodeMirror code={script} handleCodeChange={handleScriptChange}/>
      {/* <CodeMirror
        onChange={(code, text) => setCode(code)}
        value={code}
        options={{
          lineNumbers: true,
          keyMap: 'sublime',
          mode: 'jsx',
          theme: 'ambiance',
          // readOnly: !allowEdit
        }}
      /> */}
    </Drawer>
  )
}
export default forwardRef(ScriptPanel)
